<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程网课介绍页</title>
    <style>

    </style>
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="css/introduction/normalize.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="css/introduction/common.css">
    <!-- 引入introduction样式 -->
    <link rel="stylesheet" href="css/introduction/Introduction.css">
    <script src="js/introduction/jquery.min.js"></script>
    <script src="js/introduction/introduction.js"></script>
</head>

<body>
    <!-- 顶部模块---start -->
    <div class="header clearfix">
        <div class="nav w">
            <div class="logo fl">
                <a href="#" title="学成教育网"> <img src="images/introduction/logo.png" alt=""></a>
            </div>
            <nav class="fl">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="introduction.html">课程</a></li>
                    <li><a href="plan.html">职业规划</a></li>
                </ul>
            </nav>
            <div class="pearson fr">
                <i></i>
                <a href="set.html" id="user">个人中心</a>
                <img class="ld" src="images/introduction/ld.png" alt="" />
                <a href="#" class="qq">
                    <img src="images/introduction/pic.png" />
                </a>
                <a href="#">qq_login</a>
            </div>
            <div class="search fr">
                <input type="search" name="search" placeholder="输入关键字" />
                <button><img src="images/introduction/fa-search.png"></button>
            </div>
        </div>
    </div>
    <!-- 顶部模块---end -->

    <!-- banner开始 -->
    <div class="banner">
        <div class="box w">

            <div class="boxleft">
                <div class="kc">
                    <i> 课程</i>
                    <span> 编程入门</span>
                </div>
                <h1>程序语言设计</h1>
                <div class="jiage">
                    <span>特惠价格￥999</span>
                    <s>原价￥1999</s>
                </div>
                <div class="lesson_info">
                    <div class="study_now">马上学习</div>
                    <div class="lesson_data">

                        <div class="lesson_data_item">
                            <div>难度等级</div>
                            <div>中级</div>
                        </div>
                        <div class="lesson_data_item">
                            <div>课程时长</div>
                            <div> 2小时27分</div>
                        </div>
                        <div class="lesson_data_item">
                            <div>评分</div>
                            <div> 4.7分</div>
                        </div>
                        <div class="lesson_data_item">
                            <div> 授课模式</div>
                            <div> 录播</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box_right">
                <div class="video">
                    <div class="block_">
                        <div class="yuan">
                            <img src="images/introduction/tuoyuan.png" alt="">
                            <div class="sanjiao"></div>
                        </div>
                    </div>
                </div>

                <div class="tubiao">
                    <div class="box_text">
                        <div class="collect">收藏 23 </div>
                        <div class="partake_of">分享 </div>
                    </div>
                    <div class="weixin"> </div>
                </div>
            </div>


        </div>

    </div>
    <!-- banner结束 -->


    <!-- 主体部分开始 -->
    <div class="content w  clearfix">
        <div class="content_nav">
            <ul>
                <li>课程介绍 </li>
                <li>目录 </li>
                <li>问答 </li>
                <li> 笔记 </li>
                <li>代码</li>
            </ul>
        </div>
        <div class="box_tab">
            <div class="item">1</div>
            <ul class="item four" style="display: block;">
                <li>
                    <div class="text-0 text" data-index=0>
                        <div class="imgs"><img src="images/introduction/形状 3 拷贝 6@2x.png" alt="" class="angle"></div>

                        <div class="text_top">
                            <h3>第一阶段 HTTP协议基础详解</h3><i>8小时<i></i>
                        </div>
                        <p>使用Java消息中间件处理异步消息成为了分布式系统中的必修课，通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。</p>
                    </div>
                    <div>
                        <ul class="pull_text-0 pull_text show">
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 97’33”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.2 视频：为什么分为 A 部分、B 部分、C 部分
                                <span> 66’15”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.3 视频：软件安装介绍
                                <span> 86’42”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.4 阅读：Emacs安装
                                <span> 59’00”</span>

                            </li>
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 93’29”</span>

                            </li>
                            <li class="last">阶段测试</li>
                        </ul>
                </li>
                <li>
                    <div class="text-1 text" data-index=1>
                        <div class="imgs"><img src="images/introduction/形状 3 拷贝 6@2x.png" alt=""></div>

                        <div class="text_top">
                            <h3>第二阶段 HTTP协议基础详解</h3><i>8小时<i></i>
                        </div>
                        <p>使用Java消息中间件处理异步消息成为了分布式系统中的必修课，通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。</p>
                    </div>
                    <div>
                        <ul class="pull_text pull_text-1 ">
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 97’33”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.2 视频：为什么分为 A 部分、B 部分、C 部分
                                <span> 66’15”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.3 视频：软件安装介绍
                                <span> 86’42”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.4 阅读：Emacs安装
                                <span> 59’00”</span>

                            </li>
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 93’29”</span>

                            </li>
                            <li class="last">阶段测试</li>
                        </ul>
                </li>
                <li>
                    <div class="text-2 text" data-index=2>
                        <div class="imgs"><img src="images/introduction/形状 3 拷贝 6@2x.png" alt=""></div>

                        <div class="text_top">
                            <h3>第三阶段 HTTP协议基础详解</h3><i>8小时<i></i>
                        </div>
                        <p>使用Java消息中间件处理异步消息成为了分布式系统中的必修课，通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。</p>
                    </div>
                    <div>
                        <ul class="pull_text pull_text-2 ">
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 97’33”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.2 视频：为什么分为 A 部分、B 部分、C 部分
                                <span> 66’15”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.3 视频：软件安装介绍
                                <span> 86’42”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.4 阅读：Emacs安装
                                <span> 59’00”</span>

                            </li>
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 93’29”</span>

                            </li>
                            <li class="last">阶段测试</li>
                        </ul>
                </li>
                <li>
                    <div class="text-3 text" data-index=3>
                        <div class="imgs"><img src="images/introduction/形状 3 拷贝 6@2x.png" alt=""></div>

                        <div class="text_top">
                            <h3>第四阶段 HTTP协议基础详解</h3><i>8小时<i></i>
                        </div>
                        <p>使用Java消息中间件处理异步消息成为了分布式系统中的必修课，通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。</p>
                    </div>
                    <div>
                        <ul class="pull_text pull_text-3 ">
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 97’33”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.2 视频：为什么分为 A 部分、B 部分、C 部分
                                <span> 66’15”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.3 视频：软件安装介绍
                                <span> 86’42”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.4 阅读：Emacs安装
                                <span> 59’00”</span>

                            </li>
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 93’29”</span>

                            </li>
                            <li class="last">阶段测试</li>
                        </ul>
                </li>
                <li>
                    <div class="text-4 text " data-index=4>
                        <div class="imgs"><img src="images/introduction/形状 3 拷贝 6@2x.png" alt=""></div>

                        <div class="text_top">
                            <h3>第五阶段 HTTP协议基础详解</h3><i>8小时<i></i>
                        </div>
                        <p>使用Java消息中间件处理异步消息成为了分布式系统中的必修课，通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。</p>
                    </div>
                    <div>
                        <ul class="pull_text pull_text-4">
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 97’33”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.2 视频：为什么分为 A 部分、B 部分、C 部分
                                <span> 66’15”</span>


                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.3 视频：软件安装介绍
                                <span> 86’42”</span>
                                <img src="images/introduction/矩形 69@2x.png" alt="">
                            </li>
                            <li>
                                1.4 阅读：Emacs安装
                                <span> 59’00”</span>

                            </li>
                            <li>
                                1.5 作业1：Emacs安装
                                <span> 93’29”</span>

                            </li>
                            <li class="last">阶段测试</li>
                        </ul>
                </li>
            </ul>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>

        </div>

        <div class="content_right">
            <div class="teacher ">
                <div class="teacher_top"><img src="images/introduction/20154125104146352@2x.png" alt="">
                    <div class="teacher_name"><i>教学方</i><span>
                            毛老师
                        </span>
                        <p>高级前端开发工程师
                            10年开发经验</p>
                    </div>
                </div>

                <h4>TA的课程</h4>
                <div class="teacher_text">
                    JavaEE开发与教学多年，精通JavaEE技术体系，对流行框架
                    JQuery、DWR、Struts1/2，Hibernate，Spring，MyBatis、JBPM、Lucene

                    等有深入研究。授课逻辑严谨，条理清晰，注重学生独立解决问题的能力。

                </div>
            </div>
            <h2>看过该课的同学也在看</h2>
            <div class="accidence">
                <div class="accidence_top">

                    <h4>前端小白入门</h4>
                    <p>Web前端攻城狮培养计划</p>
                    <div class="score">
                        <ul>
                            <li class="li_left">2589646次播放 </li>
                            <li class="li_right">4.8分</li>
                        </ul>
                    </div>
                </div>
                <ul class="accidence_bottom">
                    <li>
                        Linux 达人养成记

                    </li>
                    <li>Java消息中间件</li>
                    <li> Hibernate Validator</li>
                    <li> ASP.NET-MVC网站开发</li>
                    <li>Android架构模式详解之MVC…</li>
                    <li>Linux 达人养成记</li>
                    <li>Java消息中间件</li>
                    <li>Hibernate Validator</li>
                    <li>ASP.NET-MVC网站开发</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    </div>
    <!-- 主体部分结束
    <-- 底部模块---start -->
    <div class="footer ">
        <div class="w">
            <div class="copyright">
                <img src="images/introduction/logo.png" alt="">
                <p>
                    学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
                    <br>
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
                </p>
                <a href="#" class="app">app下载</a>
            </div>
            <div class="links">
                <dl>
                    <dt>
                        关于学成网
                    </dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何拿到毕业证</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 底部模块---end -->
</body>

</html>